<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图片缩放示例</title>
		<style>
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				margin: 0;
				background-color: #f0f0f0;
			}

			#app {
				text-align: center;
			}

			button {
				margin: 5px;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
	</head>

	<body>
		<div id="app">
			<img :width="width" src="img/生成 3D 狐狸图片.png" alt="">
			<div>
				<button @click="enlarge">放大10%</button>
				<button @click="shrink">缩小10%</button>
			</div>
			{{msg}}<br>
			<input v-model="msg" type="text" />
			<hr>
			{{a}}是
			<span v-if="a%2==0">偶数</span>
			<span v-else>奇数</span>
			{{a%2==0?"偶数":"奇数"}}
			<hr>
			姓名：{{student.name}} 年龄：{{student.age}}
			<p>
				{{student.name}} 是
				<span v-if="student.age >= 18">成年人</span>
				<span v-else>未成年人</span>
				<!-- 三元运算符：条件？结果1：结果2 -->
				{{student.age >= 18?"成年人":"未成年人"}}
			</p>
			<hr>
		</div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						width: 200,
						msg: 'hello vue',
						a: 6,
						student: {
							name: "张三",
							age: 16
						}
					};
				},
				methods: {
					enlarge() {
						this.width = this.width * 1.1;
					},
					shrink() {
						this.width = this.width * 0.9;
					}
				}
			});
			app.mount('#app');
		</script>
	</body>

</html>